<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper">
          <div class="countFsColor addBtnA" @click="showDiog">添加</div>
          <el-table
            :data="tableData"
            style="width: 100%"
         
            class="card-table"
            :border="false"
            stripe
          >
            <template>
              <slot />
            </template>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!--文件添加-->
    <myModal :obj="obj" :disabled="disabled" @close="close" @save="save">
      <div class="mpdalBody">
        <el-form ref="form" :model="sizeForm" :rules="editFormRule" label-width="85px" class="formDiv">
          <el-form-item label="管理角色:" :required="true">
            <el-input
              v-model="sizeForm.roleName"
              type="text"
              placeholder="如：建筑商"
            />
          </el-form-item>
          <el-form-item label="名称:" :required="true">
            <el-input
              v-model="sizeForm.name"
              type="text"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="联系方式:" :required="true" prop="contact">
            <el-input
              v-model="sizeForm.contact"
              type="text"
              placeholder="请输入内容"
            />
          </el-form-item>
          <!---->
          <!---->
        </el-form>
      </div>
    </myModal>
    <!---->
  </div>
</template>

<script>
import myModal from '@/components/Modal'
import { addHouseManage, getHouseManageListByHouseId } from '@/api/houseManage'
export default {
  components: { myModal },
  props: {
    houseid: {
      type: String
    }
  },
  data() {
    var checkPhone = (rule, value, callback) => {
      var phoneReg = /^1[3-9][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          callback()
          // if (phoneReg.test(value)) {
          //   callback()
          // } else {
          //   callback(new Error('电话号码格式不正确'))
          // }
        }
      }, 100)
    }
    return {
      disabled: true,
      sizeForm: {},
      tableData: [],
      obj: {
        show: false,
        title: '添加管理信息',
        width: '647px'
      },
      textarea: '',
      date1: '',
      editFormRule: {
        contact: [{ validator: checkPhone, required: true, message: '电话号码格式不对', trigger: ['change', 'blur'] }]
      },
      props: {
        tableConfig: {
          type: Object,
          required: true,
          default: () => {}
        },
        tableData: {
          type: Array,
          required: true,
          default: () => []
        }
      }
    }
  },
  watch: {
    sizeForm: {
      handler(val) {
        if (val.roleName && val.contact && val.name) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  created() {
    console.log('houseManage houseId：', this.houseid)
    this.queryFileList()
  },
  methods: {
    showDiog() {
      this.sizeForm = {}
      this.obj.show = true
    },
    save() {
      const that = this
      var data = this.sizeForm
      data.houseId = this.houseid
      that.$refs.form.validate((valid) => {
        if (valid) {
          addHouseManage(data).then(response => {
            console.log(response)
            if (response.code === 200) {
              that.close()
              that.queryFileList()
              that.obj.show = false
            }
          })
        }
      })
    },
    close() {
      this.obj.show = false
    },
    queryFileList() {
      getHouseManageListByHouseId(this.houseid).then(response => {
        this.tableData = response.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf, ::v-deep .el-table td,::v-deep .el-table__body{border: 0;}
::v-deep .el-table::before ,::v-deep .el-table__fixed-right::before{display: none;}
::v-deep  th{background: #cacaca;font-weight: bold;color: #575757;}
::v-deep   .el-table--striped .el-table__body tr.el-table__row--striped td{background: #f7f7f7;}
::v-deep   .addBtnA{text-align: right;margin-bottom: 10px;cursor: pointer;}
</style>
